<template>
	<view class="container" :style="{minHeight:$height()}">
		<image :src="$utils.imagePath('/upload/image/partner-top.png')" style="width:100%;" mode="widthFix"></image>
		<view class="content">
			<view class="siyuan-font box">
				<span
					class="bold">人人售电，</span>目前已开通22个省份，承接五大（国能，华能，华电，大唐，国电投）以及众多地方能源集团的售电业务，2023年累计签约电量超过167亿度。全国注册经纪人超过5000人，完成签约售电经纪人尽200人。
			</view>
			<view class="contact-us">
				<view class="title siyuan-font">
					联系方式
				</view>
				<view class="form">
					<u-form-item label="姓名" left-icon="account" label-width="130" :borderBottom="false">
						<u-input :border="true" placeholder="请输入您的称呼" borderColor="#35407c" v-model="form.username" />
					</u-form-item>
					<u-form-item label="电话" left-icon="phone" label-width="130" :borderBottom="false"><u-input
							:border="true" placeholder="请输入手机号码" borderColor="#35407c"
							v-model="form.mobile" /></u-form-item>

					<u-form-item label="微信" left-icon="weixin-fill" label-width="130" :borderBottom="false"><u-input
							:border="true" placeholder="请输入微信号码" borderColor="#35407c"
							v-model="form.wechat" /></u-form-item>
					<u-form-item :borderBottom="false">
						<u-button type="primary" @click="submit">提交</u-button>
					</u-form-item>
				</view>
			</view>


			<view class="details">
				<view class="title siyuan-font">
					城市合伙人合作细节
				</view>

				<view class="items">
					<view class="item">
						<view class="top-png siyuan-font">
							01 | 权益
						</view>

						<view class="content siyuan-font">
							<view>1,每个城市同一时间内只限一个名额;</view>
							<view>2,城市合伙人可跨地区跨省份组建团队。</view>
							<view>3,城市合作人所组建的团队为公司创造总收益的5%(税前)作为合伙人的管理费。</view>
							<view>4,任职期结束后,如未续任情况下,在合作期内的产生的收益部分仍然享有。</view>
							<view>5,城市合伙人采用考核流动制,一个周期考核不达标者,亦有机会争取下期及其他城市任职机会。</view>


						</view>
						<image class="icon" :src="$utils.imagePath('/upload/image/partner-icon1.png')" mode="widthFix">
						</image>
					</view>

					<view class="item2 item">
						<view class="top-png siyuan-font">
							02 | 考核标准
						</view>

						<view class="content siyuan-font">
							<view>1,任职之前,与我方合作至少已签约 1000 万电量。</view>
							<view>2,任职期一年,到期之后根据双方意向可续任。</view>

						</view>
						<image class="icon" :src="$utils.imagePath('/upload/image/partner-icon2.png')" mode="widthFix">
						</image>
					</view>

					<view class="item3 item">
						<view class="top-png siyuan-font">
							03 | 中止合作
						</view>

						<view class="content siyuan-font">
							<view>1,任职期间出现严重影响本公司、合作售电公司声誉、形象、利益的事件发生。</view>
							<view>2,平台方通过电话、微信等方式连续三次联系不上,且一个月内也无任何回复者。</view>
							<view>3,任职合作期间,公司未授权严禁与其他售电公司有合作或者业务往来。</view>


						</view>
						<image class="icon" :src="$utils.imagePath('/upload/image/partner-icon3.png')" mode="widthFix">
						</image>
					</view>
				</view>

			</view>







			<view class="details">
				<view class="title  siyuan-font">
					区县合伙人合作细节
				</view>

				<view class="items">
					<view class="item">
						<view class="top-png  siyuan-font">
							01 | 权益
						</view>

						<view class="content  siyuan-font">
							<view>1,每个区县同一时间内只限一个名额。</view>
							<view>2,区县代理人可跨地区跨省份组建团队。</view>
							<view>3,区县代理人所组建的团队为公司创造总收益的3%(税前)作为其的管理费。</view>
							<view>4，任职期结束后，如未续任情况下，在合作期内的产生的收益部分仍然享有。</view>
							<view>5,区县代理人采用考核流动制,一个周期考核不达标者,亦有机会争取下期及其他区县任职机会。</view>

						</view>
						<image class="icon" :src="$utils.imagePath('/upload/image/partner-icon1.png')" mode="widthFix">
						</image>
					</view>

					<view class="item2 item">
						<view class="top-png  siyuan-font">
							02 | 考核标准
						</view>

						<view class="content  siyuan-font">
							<view>1,任职之前,与我方合作至少已签约 100 万电量。</view>
							<view>2,任职期一年,到期之后根据双方意向可续任。</view>

						</view>
						<image class="icon" :src="$utils.imagePath('/upload/image/partner-icon2.png')" mode="widthFix">
						</image>
					</view>

					<view class="item3 item">
						<view class="top-png  siyuan-font">
							03 | 中止合作
						</view>

						<view class="content  siyuan-font">

							<view>1,任职期间出现严重影响本公司、合作售电公司声誉、形象、利益的事件发生。</view>
							<view>2,平台方通过电话、微信等方式连续三次联系不上,且一个月内也无任何回复者。</view>
							<view>3,任职合作期间,公司未授权严禁与其他售电公司有合作或者业务往来。</view>

						</view>
						<image class="icon" :src="$utils.imagePath('/upload/image/partner-icon3.png')" mode="widthFix">
						</image>
					</view>
				</view>

			</view>
		</view>
		<view style="position: relative;">
			<img style="width: 73%;position: absolute;top: -230px;z-index: 0;" :src="$utils.imagePath('/upload/image/partner-back.png')" />
		</view>


		<image style="width:100%;" :src="$utils.imagePath('/upload/image/partner-ewm.png')" mode="widthFix"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: "",
					mobile: "",
					wechat: ""
				}
			}
		},
		methods: {
			submit() {
				if (!this.form.username) {
					this.$msg.toast("请填写名称")
					return
				}
				if (!this.form.mobile) {
					this.$msg.toast("请填写电话号码")
					return
				}
				if (!this.form.wechat) {
					this.$msg.toast("请填写微信号码")
					return
				}
				this.$axios.request(this.$api.addPartnerJoin, "POST", this.form).then((val) => {
					this.$msg.toastCallback("提交成功", () => {
						window.location.reload()
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #163572;

		.content {
			width: 96%;
			margin: 0px auto;
			// margin-top: -177px;
			position: relative;

		}

		.box {
			width: 100%;
			background: #aebbd2;
			border-radius: 20px;
			padding: 10px 20px;
			margin-top: -178px;
			color: #172f5d;
			font-size: 27.64rpx;
			text-indent: 2em;
			line-height: 38rpx;
			// font-weight: bold;

		}

		.contact-us {
			width: 100%;
			background-image: linear-gradient(180deg, #c8d8ee 40%, #ffffff 100%);
			margin-top: 100rpx;
			padding: 0px 20px;
			padding-bottom: 10px;
			border-radius: 20px;

			.form {
				margin: 20px auto;
			}

			.title {
				width: 390rpx;
				height: 86rpx;
				background-image: linear-gradient(90deg, #20478f 5%, #d78e9d 100%);
				margin: 0px auto;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
				font-size: 52rpx;
				// font-weight: bold;
				text-align: center;
				line-height: 86rpx;
				color: #FFFFFF;
			}

		}

		.details {
			width: 100%;
			background-image: linear-gradient(180deg, #0f2648 50%, #3161a2 100%);
			margin-top: 100rpx;
			padding: 0px 20px;
			padding-bottom: 10px;
			border-radius: 10px;
			position: relative;
			z-index: 1;


			.title {
				width: 390rpx;
				height: 86rpx;
				background-image: linear-gradient(90deg, #7d98c3 60%, #e1e9f6 100%);
				margin: 0px auto;
				border-bottom-left-radius: 20px;
				border-bottom-right-radius: 20px;
				font-size: 38rpx;
				font-weight: bold;
				text-align: center;
				line-height: 86rpx;
				color: #15274c;
			}

			.item2 {
				background-image: linear-gradient(180deg, #e1e9f6 30%, #e2d4e1 100%) !important;
			}

			.item3 {
				background-image: linear-gradient(-30deg, #e1e9f6 50%, #e3b6c2 100%) !important;
			}

			.item {
				padding: 80rpx 44rpx;
				font-size: 26rpx;
				line-height: 44rpx;
				// font-weight: bold;
				color: #102f57;
				border-radius: 20px;
				background-image: linear-gradient(120deg, #e1e9f6 70%, #e3b6c2 100%);
				margin: 40px auto;
				position: relative;

				.top-png {
					width: 350rpx;
					height: 100rpx;
					background-image: url('https://v2.zygyx.com/renren-api/upload/image/partner-detail-top.png');
					background-size: 100%;
					background-repeat: no-repeat;
					opacity: .75;
					position: absolute;
					top: -15px;

					left: 0px;
					font-size: 38rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 50rpx;
					padding-left: 20px;
				}

				.content {
					position: relative;
					z-index: 1;
				}

				.icon {
					width: 250rpx;
					position: absolute;
					right: 0;
					bottom: 0;
					z-index: 0;
				}
			}
		}

		.bold {
			font-weight: bold;
			font-size: 37rpx;
			color: #15428e;
		}
	}

	/deep/ .u-form-item--left__content__icon {
		color: #343578 !important;
	}

	/deep/ .u-form-item--left__content__label {
		font-weight: bold;
	}
</style>